<template>
  <div class="fee-chart">
    <Tab :tabs="tabs" @tabClick="handleTab"></Tab>
    <div class="tab-container">
      <div v-show="tabIndex === 0" class="tab-item">
        <div class="chart-container">
          <p class="title">峰平谷用电量分析</p>
          <p class="sub-title">{{announce}}</p>
          <div id="loadEC"></div>
        </div>
      </div>
      <div v-show="tabIndex === 1" class="tab-item">
        <div class="chart-container">
          <p class="title">每月应缴电费分析</p>
          <p class="sub-title">{{announce}}</p>
          <div id="feeEC"></div>
        </div>
      </div>
      <div v-show="tabIndex === 2" class="tab-item">
        <div class="chart-container">
          <p class="title">每月收益简表</p>
          <p class="sub-title">{{announce}}</p>
          <div id="profitEC"></div>
        </div>
      </div>
      <div v-show="tabIndex === 3" class="tab-item">
        <Report :show="tabIndex === 3"
                :averageFee="averageFee"
                :maxFee="maxFee"
                :minFee="minFee"
                :flatFees="flatFees"
                :highFees="highFees"
                :lowFees="lowFees"
                :minMonth="minMonth"
                :maxMonth="maxMonth"
                :perMonthFee="totalFee"
                :unitFee="unitFee"
                :esShow="esShow"
                :anniversarFee="anniversarFee"></Report>
      </div>
    </div>
  </div>
</template>

<script>
import Tab from '../components/Tab'
import opt from '@/utils/echartsOption'
import Report from '../components/ESReport'

export default {
  name: 'FeeTabChart',
  props: {
    loadData: {
      type: Array
    },
    totalFee: {
      type: Array
    },
    profit: {
      type: Array
    },
    unitFee: { type: Number },
    esShow: { type: Number }
  },
  data () {
    return {
      announce: '*本页数据由MecKey云计算提供',
      tabs: ['峰平谷', '电费', '收益', '总报告'],
      tabIndex: 0,
      loadChart: {},
      feeChart: {},
      profitChart: {},
      anniversarFee: 0,
      averageFee: 0,
      maxFee: 0,
      minFee: 0,
      maxMonth: 0,
      minMonth: 0,
      highFees: 0,
      flatFees: 0,
      lowFees: 0
    }
  },
  components: {
    Tab,
    Report
  },
  methods: {
    handleTab (index) {
      this.tabIndex = index
      const windowPadding = 30
      if (index === 1) {
        this.feeChart = this.$echarts.init(document.getElementById('feeEC'))
        const mon = opt.months(12)
        const feeOpt = opt.VerticalChart(mon, ['电费'], [this.totalFee])
        this.feeChart.setOption(feeOpt)
        this.feeChart.resize({
          width: document.documentElement.clientWidth - windowPadding,
          height: 400
        })
      } else if (index === 2) {
        const kwh = []
        const prof = []
        for (const item of this.profit) {
          kwh.push(item[0])
          prof.push(item[1])
        }
        this.profitChart = this.$echarts.init(document.getElementById('profitEC'))
        const mon = opt.months(12)
        const profitOpt = opt.VerticalDoubleChart(mon, ['发电量', '收益'], [kwh, prof], ['#91c7ae', '#c23531'])
        this.profitChart.setOption(profitOpt)
        this.profitChart.resize({
          width: document.documentElement.clientWidth - windowPadding,
          height: 500
        })
      }
    }
  },
  mounted () {
    this.loadChart = this.$echarts.init(document.getElementById('loadEC'))
  },
  watch: {
    loadData () {
      const highFee = []
      const flatFee = []
      const lowFee = []
      for (const data of this.loadData) {
        highFee.push(data.high_fee)
        flatFee.push(data.flat_fee)
        lowFee.push(data.low_fee)
      }
      const loadOpt = opt.lineChart(opt.months(12), ['高峰用电', '平段用电', '低谷用电'], [highFee, flatFee, lowFee], ['red', 'orange', 'green'])
      this.loadChart.setOption(loadOpt)

      // 计算年度电费
      let anniversarFee = 0
      for (const fee of this.totalFee) {
        anniversarFee += fee
      }
      // 计算平均电费
      const averageFee = parseInt(anniversarFee / 12)
      // 计算最高电费
      let maxFee = this.totalFee[0]
      let maxMonth = 1
      // 计算最低电费
      let minFee = this.totalFee[0]
      let minMonth = 1
      for (let i = 0; i < this.totalFee.length; i++) {
        if (this.totalFee[i] < minFee) {
          minFee = this.totalFee[i]
          minMonth = i + 1
        }
        if (this.totalFee[i] > maxFee) {
          maxFee = this.totalFee[i]
          maxMonth = i + 1
        }
      }
      // 获取高峰数组
      let highFees = 0
      // 获取平段数组
      let flatFees = 0
      // 获取低谷数组
      let lowFees = 0

      for (const data of this.loadData) {
        highFees += data.high_fee
        flatFees += data.flat_fee
        lowFees += data.low_fee
      }
      this.anniversarFee = anniversarFee
      this.averageFee = averageFee
      this.maxFee = maxFee
      this.minFee = minFee
      this.highFees = highFees
      this.flatFees = flatFees
      this.lowFees = lowFees
      this.maxMonth = maxMonth
      this.minMonth = minMonth
    }
  }
}
</script>

<style scoped>
  #loadEC {
    width: 100%;
    height: 260px;
  }
  #feeEc {
    width: 100%;
    height: 400px;
  }
  #profitEC {
    width: 100%;
    height: 500px;
  }
  .tab-item {
    padding: 10px;
    background-color: #0095ff;
  }
  .chart-container {
    background-color: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    padding: 36px 10px;
  }
  .price {
    color: #0095ff;
    font-weight: bold;
  }
  .chart-container .title {
    font-size: 18px;
    font-weight: bold;
  }
  .chart-container .sub-title {
    font-size: 13px;
    color: #9a9a9a;
  }
</style>
